function check() {
    //当复选框选中，按钮样式改变
    let check = document.querySelector("main .checkbox input")
    let btn = document.querySelector("main .login")
    check.addEventListener("click", function () {
        if (check.checked) {
            btn.classList.add("active")
        } else {
            btn.classList.remove("active")
        }
    })
}
check()

//注册表单验证
function validation() {
    //获取需要验证的项
    let inputs = document.querySelectorAll("main .input-box input")
    let span =document.querySelectorAll("main .input-box span")
    //获取点击按钮
    let btn = document.querySelector("main .login")
    inputs.forEach((i,j) => {
        i.addEventListener("blur",function(){
            let condition=[
                {
                    rule:function(){
                        return inputs[j].value.length>=6&&inputs[j].value.length<=20
                    }
                },{
                    rule:function(){
                        return inputs[j].value.length==11
                    }
                },{
                    rule:function(){
                        return inputs[j].value.length==4
                    }
                },{
                    rule:function(){
                        return inputs[j].value.length>=6&&inputs[j].value.length<=12
                    }
                }
            ]
            if (!(condition[j].rule())) {
                span[j].style.display="inline-block"
                btn.disabled=true
            }else{
                span[j].style.display="none"
                btn.disabled=false
            }
        })
    });
}
validation()